<template>
  <div>

    <div>
      <el-card class="back">
        <div>
          <div style="font-size: 32px;margin: 20px">早安，管理员，请开始一天的工作吧</div>
          <div style="font-size: 32px;margin: 20px">欢迎来到Gin+Vue</div>
<!--          <img src="@/assets/dashboard.png" style="width: 200px;float: right">-->
        </div>
      </el-card>
    </div>

    <el-row :gutter="12" style="margin-bottom: 30px">
      <el-col :span="8">
        <el-card style="color: #E6A23C">
          <div><i class="el-icon-user" style="margin-right: 5px"></i>用户数</div>
          <div style="text-align: center;font-size: 30px;font-weight: bold">{{ user }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="color: #67C23A">
          <div><i class="el-icon-document-copy" style="margin-right: 5px"></i>文章数</div>
          <div style="text-align: center;font-size: 30px;font-weight: bold">{{ word }}</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="color: #F56C6C">
          <div><i class="el-icon-view" style="margin-right: 5px"></i>浏览总数</div>
          <div style="text-align: center;font-size: 30px;font-weight: bold">{{ count }}</div>
        </el-card>
      </el-col>
    </el-row>

    <div style="float: contour">
      <el-col :span="12">
        <el-card style="margin-right: 20px">
          <div id="main" style="width: 500px; height: 400px;margin: 0 auto">
            <span style="font-size: 18px">文章列表<i class="el-icon-document"></i></span>
            <el-card v-for="(value,index) in article" :key="index" style="margin-top: 10px">
              {{value.name}}
            </el-card>
          </div>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <div id="pie" style="width: 500px; height: 400px;margin: 0 auto"></div>
        </el-card>
      </el-col>
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: "Home",
  data(){
    return{
      user:'',
      word:'',
      count:10,
      article:[]
    }
  },
  created() {
    this.getcount()
  },
  methods:{
    getcount(){
      this.request.get("/count").then(res=>{
        this.user=res.data.data;
      })
      this.request.get("/article/count").then(res=>{
        this.word=res.data.data;
      })
      this.request.get("/article/list").then(res=>{
        this.article=res.data.data;
      })
    }
  },
  mounted() {

    //饼图
    var pieDom = document.getElementById('pie');
    var pieChart = echarts.init(pieDom);
    var pie;
    pie = {
      title: {
        text: '数量占比',
        subtext: '比例图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '',
          type: 'pie',
          radius: '70%',
          label:{            //饼图图形上的文本标签
            normal:{
              show:true,
              position:'inner', //标签的位置
              textStyle : {
                fontWeight : 300 ,
                fontSize : 14,    //文字的字体大小
                color: "#fff"
              },
              formatter:'{d}%'
            }
          },
          data: [ { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    this.request.get("/article/type").then(res=>{
      pie.series[0].data=res.data.data;
      pie && pieChart.setOption(pie);
    })

  }
}

</script>

<style scoped>
.back{
  background-image: url("../assets/dashboard.png");
  background-repeat: no-repeat;
  background-position:550px -200px;
  margin-bottom: 20px;
  height:200px;
}

</style>